import React, { FC, useEffect } from 'react'
import { View, Text, Image } from 'react-native'
import styles from './styleCookbook'
// import useFetchData from '../../../hooks/useFetchData'
import list from '../../../store/list'
import { observer } from 'mobx-react'

type Props = {
}

const Top10:FC<Props> = (props) => {
  // const { list } = useFetchData('http://localhost:9000/list')

  return (
    <View style={styles.top10Wrapper}>
      <View style={styles.hotcateTitle}>
        <Text style={styles.hotcateTitleText}>精品好菜</Text>
      </View>
      <View style={styles.top10List}>
        {
          list.top10List.map((li, index) => {
            return (
              <View 
                style={styles.top10Item}
                key={index}
              >
                <Image 
                  source={{uri: li.img}}
                  style={styles.top10Image}
                ></Image>
                <View
                  style={styles.top10TextWrapper}
                >
                  <Text style={styles.top10TextTitle}>{li.name}</Text>
                  <Text style={styles.top10TextSubTitle}>{li.all_click}浏览 {li.favorites}收藏</Text>
                </View>
              </View>
            )
          })
        }
      </View>
    </View>
  )
}

export default observer(Top10)